<!DOCTYPE html>
<html>
  <head>
    <title>Timeline | interaction | Specific Item Selectability</title>

    <script src="../../../standalone/umd/vis-timeline-graph2d.min.js"></script>
    <link href="../../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

    <style>
      body,
      html {
        font-family: arial, sans-serif;
        font-size: 11pt;
      }

      .vis-item.vis-background.negative {
        background-color: rgba(255, 0, 0, 0.2);
      }
      .vis-item.vis-background.positive {
        background-color: rgba(105, 255, 98, 0.2);
      }
      .vis-item.vis-background.marker {
        border-left: 2px solid green;
      }

      table {
        border: 1px solid gray;
      }

      td {
        text-align: center;
      }

      code {
        padding: 2px 4px;
        font-size: 90%;
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <p>
      This example shows the ability to set specific items to be selectable.
    </p>
    <p>
      Items selectability can be toggled by setting <code>selectable</code> in the <i>items</i> configuration
      options. Note: This will not override the timeline's <code>selectable</code> configuration option. If
      the timeline's <code>selectable</code> configuration option is false, then no items will be selectable.
    </p>
    <table>
      <thead>
        <tr>
          <th>Option</th>
          <th>Status</th>
          <th>Toggle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>item selectability of 'no subgroup' item in the 'foo' group</td>
          <td id="select">true</td>
          <td><button onclick="toggleItemSelectability()">Toggle</button></td>
        </tr>
      </tbody>
    </table>
    <br />

    <div id="visualization"></div>

    <script>
      // create a dataset with items
      // we specify the type of the fields `start` and `end` here to be strings
      // containing an ISO date. The fields will be outputted as ISO dates
      // automatically getting data from the DataSet via items.get().
      var items = new vis.DataSet({
        type: { start: 'ISODate', end: 'ISODate' }
      });
      var groups = new vis.DataSet([
        {
          id: 'bar',
          content: 'bar'
        },
        {
          id: 'foo',
          content: 'foo'
        }
      ]);
      // add items to the DataSet
      items.add([
        { id: 'A', start: '2014-01-20', end: '2014-01-22', type: 'background', group: 'foo' },
        {
          id: 'B',
          start: '2014-01-22',
          end: '2014-01-23',
          type: 'background',
          group: 'foo',
          className: 'negative'
        },
        { id: 0, content: 'no subgroup', start: '2014-01-20', end: '2014-01-22', group: 'foo' },

        {
          id: 'SG_1_1',
          start: '2014-01-25',
          end: '2014-01-27',
          type: 'background',
          group: 'bar',
          subgroup: 'sg_1'
        },
        {
          id: 'SG_1_2',
          start: '2014-01-26',
          end: '2014-01-27',
          type: 'background',
          className: 'positive',
          group: 'bar',
          subgroup: 'sg_1'
        },
        {
          id: 1,
          content: 'subgroup0_1',
          start: '2014-01-23T12:00:00',
          end: '2014-01-26T12:00:00',
          group: 'bar',
          subgroup: 'sg_1'
        },
        {
          id: 2,
          content: 'subgroup0_2',
          start: '2014-01-22T12:00:01',
          end: '2014-01-25T12:00:00',
          group: 'bar',
          subgroup: 'sg_1'
        },

        {
          id: 'SG_2_1',
          start: '2014-02-01',
          end: '2014-02-02',
          type: 'background',
          group: 'bar',
          subgroup: 'sg_2'
        },
        {
          id: 'SG_2_2',
          start: '2014-02-2',
          end: '2014-02-03',
          type: 'background',
          className: 'negative',
          group: 'bar',
          subgroup: 'sg_2'
        },
        {
          id: 3,
          content: 'subgroup1_1',
          start: '2014-01-27T02:00:00',
          end: '2014-01-29',
          group: 'bar',
          subgroup: 'sg_2'
        },
        {
          id: 4,
          content: 'subgroup1_2',
          start: '2014-01-28',
          end: '2014-02-02',
          group: 'bar',
          subgroup: 'sg_2'
        },

        {
          id: 'SG_3_1',
          start: '2014-01-23',
          end: '2014-01-25',
          type: 'background',
          group: 'bar',
          subgroup: 'sg_3',
          content: 'a'
        },
        {
          id: 'SG_3_2',
          start: '2014-01-26',
          end: '2014-01-28',
          type: 'background',
          className: 'positive',
          group: 'bar',
          subgroup: 'sg_3',
          content: 'b'
        },
        {
          id: 5,
          content: 'subgroup2_1',
          start: '2014-01-23T12:00:00',
          end: '2014-01-26T12:00:00',
          group: 'bar',
          subgroup: 'sg_3'
        },
        {
          id: 6,
          content: 'subgroup2_2',
          start: '2014-01-26T12:00:01',
          end: '2014-01-29T12:00:00',
          group: 'bar',
          subgroup: 'sg_3'
        },

        {
          id: 'background',
          start: '2014-01-29',
          end: '2014-01-30',
          type: 'background',
          className: 'negative',
          group: 'bar'
        },
        {
          id: 'background_all',
          start: '2014-01-31',
          end: '2014-02-02',
          type: 'background',
          className: 'positive'
        }
      ]);

      var container = document.getElementById('visualization');
      var options = {
        // orientation:'top'
        start: '2014-01-10',
        end: '2014-02-10',
        selectable: true
      };

      var timeline = new vis.Timeline(container, items, groups, options);

      var sel = true;

      function toggleItemSelectability() {
        items.update({ id: 0, selectable: (sel = !sel) });
        document.getElementById('select').innerHTML = items.get(0).selectable;
        timeline.setItems(items);
      }
    </script>
  </body>
</html>
